<template>
  <div class="intelligent-linkage">
    <div class="title blueTitleStyle">智能联动</div>
    <!-- <div class="main no-data" v-if="nodata">
        <Nodata />
    </div>-->
      <div class="main colcenterbox" v-if="nodata">
        <!-- <div class="main-content" :class="{warn_top:animate}">
        <div v-for="(item,index) in newlinkageList2" :key="index" class="main-content-item startbox">
          <span  style="width:30%;min-width:30%;max-width:30%;" v-if="item.linkageTime">{{item.linkageTime}}</span>
          <span style="width:30%;min-width:30%;max-width:30%;" >{{ item.stationName }}</span>
          <span style="width:40%;min-width:40%;max-width:40%;" >{{item.linkageReason}}</span>
        </div>
        </div>-->
        <!-- <div class="main-content centerbox" v-else>暂无数据</div> -->
        <!-- <Nodata v-else class="nodata" /> -->
      </div>
      <div class="main colcenterbox" v-if="!nodata">
        <ul class="warn_list" id="warn_list" :class="{warn_top:animate}">
          <li
            class="main-content-item startbox"
            v-for="(item,index) in newlinkageList"
            :key="index"
          >
            <span class="spanone" v-if="item.linkageTime">{{item.linkageTime}}</span>
            <span class="spanone">{{ item.stationName }}</span>
            <span class="spanone">{{item.linkageReason}}</span>
          </li>
        </ul>
        <!-- <div class="main-content centerbox" v-else>暂无数据</div> -->
        <!-- <Nodata v-else class="nodata" /> -->
      </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { GetSocketModule } from "@/store/modules/GetSocketData";
import { JointInspectionModule } from "@/store/modules/JointInspection";
import Nodata from "../../../../components/Nodata/index.vue";
import time from "../../../../utils/time";
interface linkageListType {
  time: string;
  info: string;
}
@Component({ components: { Nodata } })
export default class extends Vue {
  //数据状态
  nodata = false;
  public linkageList: linkageListType[] = [
    // {
    //   time: "2020-01-04",
    //   info: "110kV商西变电站#1主变高压侧102开关南可见光：联动开始",
    // },
    // {
    //   time: "2020-01-04",
    //   info: "110kV商西变电站#1主变高压侧102开关南可见光：联动开始",
    // },
    // {
    //   time: "2020-01-04",
    //   info: "110kV商西变电站#1可见光：联动开始",
    // },
  ];

  private animate: boolean = false;
  private smartScrollTimer; // 滚动定时器

  // 监听智能联动滚动列表
  get newlinkageList() {
    // if (this.linkageList.length > 3) {
    //   this.openInterval();
    // } else {
    //   this.closeInterval();
    // }
    // if (this.linkageList.length < 1) {
    //   this.nodata = true;
    // } else {
    //   this.nodata = false;
    // }
    // return this.linkageList;
    this.openInterval();
    if (this.linkageList.length < 1) {
      // this.nodata = true;
      return this.newlinkageList2;
    } else {
      // this.nodata = false;
      return this.linkageList;
    }
  }
  newlinkageList2 = [
    {
      linkageTime: "2020-11-18 18:59:00",
      stationName: "110kV天平变电站",
      linkageReason: "#3主变高压侧102开关南可见光",
    },
    {
      linkageTime: "2020-11-18 16:36:03",
      stationName: "110kV天平变电站",
      linkageReason: "#4主变高压侧102开关南可见光",
    },
    {
      linkageTime: "2020-11-18 09:33:40",
      stationName: "110kV天平变电站",
      linkageReason: "107开关南可见光",
    },
    {
      linkageTime: "2020-11-18 08:59:00",
      stationName: "110kV天平变电站",
      linkageReason: "#3主变高压侧102开关南可见光",
    },
    {
      linkageTime: "2020-11-18 07:36:03",
      stationName: "110kV天平变电站",
      linkageReason: "#4主变高压侧102开关南可见光",
    },
    {
      linkageTime: "2020-11-18 19:33:40",
      stationName: "110kV天平变电站",
      linkageReason: "107开关南可见光",
    },
  ];
  // 开启定时滚动
  private openInterval() {
    if (this.smartScrollTimer === undefined) {
      // 启动主变负载滚动
      this.smartScrollTimer = setInterval(this.showwarn, 2000);
    }
  }

  // 关闭定时滚动
  private closeInterval() {
    if (this.smartScrollTimer) {
      clearInterval(this.smartScrollTimer);
      this.smartScrollTimer = undefined;
    }
  }

  // 滚动机制
  private showwarn() {
    this.animate = true;
    setTimeout(() => {
      if (this.linkageList.length < 1) {
        this.newlinkageList2.push(this.newlinkageList2[0]);
        this.newlinkageList2.shift();
      } else {
        this.linkageList.push(this.linkageList[0]);
        this.linkageList.shift();
      }
      this.animate = false;
    }, 500);
  }
  // 所属地市
  get CompanyList() {
    let CompanyList = JointInspectionModule.CompanyList || [];
    return CompanyList;
  }

  fetch() {
    // 请求智能联动滚动列表
    var localCity = "";
    console.log("this.CompanyList:", this.CompanyList);

    if (this.CompanyList && this.CompanyList[0] && this.CompanyList[0].code) {
      localCity = this.CompanyList[0].code;
    } else {
      localCity = "8a1ea5c64bdebad1014bdebc6047087b";
    }
    (this as any).$services
      .linkageList({
        method: "get",
        data: { localCity: localCity },
      })
      .then((result: any) => {
        this.linkageList = result.data.slice(0, 50).map((item) => {
          return {
            deviceName: item.deviceName,
            linkageReason: item.linkageReason,
            stationName: item.stationName,
            // linkageTime: time( new Date(item.linkageTime).getTime())
            linkageTime: item.linkageTime,
          };
        });
        console.log("智能联动滚动列表:", this.linkageList);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  mounted() {
    this.fetch();
    let warnList = document.getElementById("warn_list");
    // 鼠标移入滚动列表，关闭定时器
    warnList.onmouseover = () => {
      // alert(1)
      this.closeInterval();
    };
    // 鼠标移出滚动列表，判断是否关闭定时器
    warnList.onmouseout = () => {
      if (this.linkageList.length > 8) {
        this.openInterval();
      } else {
        this.closeInterval();
      }
    };
  }
}
</script>

<style lang="scss" scoped>
.intelligent-linkage {
  width: 100%;
  height: 100%;
  .title {
    height: 0.3rem;
  }
  .main {
    display: block;
    position: relative;
    width: 100%;
    margin-top: 0.1rem;
    height: calc(100% - 0.5rem);
    overflow: hidden;
    // width: 100%;
    // height: calc(100% - 0.3rem);
    padding: 0.1rem 0.15rem;
    // background-color: burlywood;
    // display: block;
    // position: relative;
    // overflow: hidden;
    box-sizing: border-box;
    &-content {
      width: 100%;
      height: calc(100% - 0.1rem);
      display: block;
      border-top: 2px solid;
      border-bottom: 2px solid;
      border-image: linear-gradient(
          90deg,
          rgba(144, 154, 182, 0) 10%,
          rgba(144, 154, 182, 1) 50%,
          rgba(144, 154, 182, 0) 90%
        )
        30 30;
      // overflow-x: auto;
      box-sizing: border-box;
      margin: 0.05rem 0;
      &-item {
        > span {
          display: inline-block;
          text-align: center;
          font-size: 0.12rem;
          line-height: 0.24rem;
          white-space: nowrap;
          min-width: 25%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .warn_top {
        transition: all 0.5s;
        margin-top: -0.28rem;
      }
    }
  }
  .warn_list {
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    .lione {
      background: rgba(55, 74, 123, 0.65);
    }
    .litwo {
      // background: transparent;
    }
  }
  .warn_list li {
    cursor: pointer;
    height: 0.24rem;
    font-size: 0.12rem;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-content: center;
  }
  .spanone {
    line-height: 0.24rem;
    text-align: center;
    width: 33%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .spantwo {
    text-align: center;
    width: 33%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
  }
  .warn_top {
    transition: all 0.5s;
    margin-top: -0.24rem;
  }
  .nodata {
    height: calc(100% - 0.3rem);
  }
}
</style>